<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群星网约车</title>
    <!--这里引入页面的样式-->
    <style>
        .login-container,
        .register-container {
            width: 450px;
            height: auto;
            margin: 50px auto;
            padding: 30px;
            border: 1px solid #eee;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .el-form-item__label {
            color: #333;
        }

        .login-container,
        .register-container {
            /* 其他样式 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .el-form-item {
            width: 100%;
        }
        .el-button--primary {
            background-color: #409EFF;
            border-color: #409EFF;
        }

        .el-button--primary:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
        }

        .el-button--primary:focus {
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        .el-button--text {
            color: #409EFF;
        }

        .el-button--text:hover {
            color: #66b1ff;
        }

        .el-select {
            width: 100%;
        }

        .el-input__inner {
            border-color: #dcdfe6;
        }

        .el-input__inner:focus {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
        .background {
            background-image: url('../image/login-bg.png');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container, .register-container {
            background-color: rgba(255, 255, 255, 0.7);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 600px;
            transform: scale(0.9);
            transform-origin: top left;
        }

        .captcha-image {
            margin-left: 10px;
            width: 150px;
            height: 80px;
            cursor: pointer;
        }

        .refresh-captcha-link {
            display: block;
            margin-top: 5px;
            color: #409EFF;
            cursor: pointer;
            text-align: center;
        }

        .verification-container {
            display: flex;
            align-items: center;
            margin-top: -20px;
        }

        .verification-input {
            flex: 1;
        }

        .form-row-centered {
            display: flex;
            justify-content: center;
        }

        .form-row-centered .el-button {
            margin: 0 10px;
        }
    </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<!--<script  src="../js/sakura.js"></script>-->
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/ajax.js"></script>
<body>
<div id="app">
    <div class="background">
        <div class="login-container" v-if="currentView === 'login'">
            <h2>登录</h2>
            <el-form ref="loginForm" :model="loginForm" label-width="80px">
                <div class="form-row">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="loginForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginForm.password"></el-input>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="用户类型" prop="userType">
                        <el-select v-model="loginForm.userType" placeholder="请选择用户类型">
                            <el-option label="普通用户" value="ordinary"></el-option>
                            <el-option label="司机用户" value="driver"></el-option>
                            <el-option label="管理员" value="admin"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="验证码" prop="captcha">
                        <div class="verification-container">
                            <el-input v-model="loginForm.verification" class="verification-input"></el-input>
                            <img :src="loginForm.captchaUrl" onclick="changepics()" class="captcha-image">
                            <a onclick="changepics()" class="refresh-captcha-link">看不清？换一张</a>
                        </div>
                    </el-form-item>
                </div>
                <div class="form-row form-row-centered">
                    <el-form-item>
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                        <el-button @click="switchToRegister">注册</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="register-container" v-else>
            <h2>注册</h2>
            <el-form ref="form" :model="form" label-width="80px">
                <div class="form-row">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input type="password" v-model="form.confirmPassword"></el-input>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="用户类型" prop="userType">
                        <el-radio-group v-model="form.userType">
                            <el-radio label="普通用户"></el-radio>
                            <el-radio label="司机用户"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <template v-if="form.userType === '司机用户'">
                    <div class="form-row">
                        <el-form-item label="车辆类型" prop="vehicleType">
                            <el-select v-model="form.vehicleType" placeholder="请选择车辆类型">
                                <el-option label="经济型" value="经济型"></el-option>
                                <el-option label="舒适型" value="舒适型"></el-option>
                                <el-option label="豪华型" value="豪华型"></el-option>
                                <el-option label="大型" value="大型"></el-option>
                                <el-option label="绿色环保型" value="绿色环保型"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车辆颜色" prop="vehicleColor">
                            <el-select v-model="form.vehicleColor" placeholder="请选择车辆颜色">
                                <el-option label="白色" value="白色"></el-option>
                                <el-option label="黑色" value="黑色"></el-option>
                                <el-option label="银灰色" value="银灰色"></el-option>
                                <el-option label="蓝色" value="蓝色"></el-option>
                                <el-option label="红色" value="红色"></el-option>
                                <el-option label="青绿色" value="青绿色"></el-option>
                                <el-option label="金色" value="金色"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="form-row">
                        <el-form-item label="车牌号" prop="vehicleNumber">
                            <el-input v-model="form.vehicleNumber"></el-input>
                        </el-form-item>
                    </div>
                </template>
                <div class="form-row">
                    <el-form-item label="验证码" prop="captcha" style="margin-bottom: 30px">
                        <div class="verification-container">
                            <el-input v-model="form.verification" class="verification-input"></el-input>
                            <img :src="form.captchaUrl" onclick="changepics()" class="captcha-image">
                            <a onclick="changepics()" class="refresh-captcha-link">看不清？换一张</a>
                        </div>
                    </el-form-item>
                </div>
                <div class="form-row form-row-centered">
                    <el-form-item>
                        <el-button @click="switchToLogin">返回登录</el-button>
                        <el-button type="primary" @click="handleRegister">注册</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentView: 'login',
                loginForm: {
                    phone: '',
                    password: '',
                    userType: '',
                    verification: '',
                    captchaUrl: '/user/image?' + Math.random(),
                },
                form: {
                    username: '',
                    phone: '',
                    password: '',
                    confirmPassword: '',
                    email: '',
                    userType: '普通用户',
                    vehicleType: '', // 添加车辆类型属性
                    vehicleColor:'', //添加车辆颜色
                    vehicleNumber: '', // 添加车牌号属性
                    verification: '',
                    captchaUrl: '/user/image?' + Math.random(),
                },
            }
        },
        methods: {
            handleLogin() {
                /*changepics();*/
                if (!this.loginForm.userType) {
                    this.$message.error('请选择用户类型');
                    return;
                }
                const data = {
                    phoneNumber: this.loginForm.phone,
                    password: this.loginForm.password,
                    verification: this.loginForm.verification
                };

                let loginUrl = '';
                switch (this.loginForm.userType) {
                    case 'ordinary':
                        loginUrl = '/user/users/login';
                        break;
                    case 'driver':
                        loginUrl = '/driver/drivers/login';
                        break;
                    case 'admin':
                        loginUrl = '/admin/admins/login';
                        break;
                    default:
                        this.$message.error('无效的用户类型');
                        return;
                }

                axios.post(loginUrl, data)
                    .then(response => {
                        if (response.data.code === 1) {
                            localStorage.setItem('token', response.data.data.token);
                            localStorage.setItem('userId', response.data.data.id);
                            localStorage.setItem('userName', response.data.data.username);
                            localStorage.setItem('raffleNum', response.data.data.raffleNum);
                            localStorage.setItem('email',response.data.data.email);
                            localStorage.setItem('phoneNumber',response.data.data.phoneNumber);
                            localStorage.setItem('pic',response.data.data.pic);
                            localStorage.setItem('day',response.data.data.createdAt);
                            localStorage.setItem('licensePlate',response.data.data.licensePlate);
                            if(this.loginForm.userType=='ordinary'){
                                window.location.href='userMain.html';
                            }else if(this.loginForm.userType=='driver'){
                                window.location.href='driverMain.html';
                            }else {
                                window.location.href='manager.html';
                            }
                        } else {
                            this.errorMessage = response.data.message;
                            this.$message.error(this.errorMessage);
                        }
                    })
                    .catch(error => {
                        console.error('登录请求出错:', error);
                        this.$message.error('验证码错误');
                    });
                // 之后的每次请求都在请求头中带上令牌
                axios.interceptors.request.use(
                    config => {
                        const token = localStorage.getItem('token');
                        if (token) {
                            config.headers.Authorization = `Bearer ${token}`;
                        }
                        return config;
                    },
                    error => {
                        return Promise.reject(error);
                    }
                );
            },
            handleRegister() {
                /*changepics();*/
                // 处理注册逻辑
                const data = {
                    username: this.form.username,
                    phoneNumber: this.form.phone,
                    password: this.form.password,
                    email: this.form.email,
                    driverVehicles: {
                        vehicleType: this.form.vehicleType,
                        color: this.form.vehicleColor
                    },
                    licensePlate: this.form.vehicleNumber,
                    verification: this.form.verification
                };

                let registerUrl = '';
                switch (this.form.userType) {
                    case '普通用户':
                        registerUrl = '/user/users/register';
                        break;
                    case '司机用户':
                        registerUrl = '/driver/drivers/register';
                        break;
                    default:
                        this.$message.error('无效的用户类型');
                        return;
                }
                axios.post(registerUrl, data)
                    .then(response => {
                        if (response.data.code === 1) {
                            this.$message.success('注册成功');
                        } else {
                            this.errorMessage = response.data.message;
                            this.$message.error(this.errorMessage);
                        }
                    })
                    .catch(error => {
                        console.error('注册请求出错:', error);
                        this.$message.error('验证码错误');
                    });

            },
            switchToRegister() {
                this.currentView = 'register';
/*                changepics();*/
            },
            switchToLogin() {
                this.currentView = 'login';
/*                changepics();*/
            },
            changepics(){
                $(".captcha-image").attr("src","/user/image?"+Math.random());
            }
        },
        mounted(){

        }
    });
</script>
<!-- 不用vue的js代码写在下面-->
<script>
    $(function (){
        changepics();
    })
    function changepics(){
        $(".captcha-image").attr("src","/user/image?"+Math.random());
    }
</script>
</body>
</html>